<template>
    <el-descriptions
        class="margin-top"
        title="用户详情"
        :column="1"
        border
    >
      <template #extra>
        <el-button type="primary">操作</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            userId
          </div>
        </template>
        {{ userStore.userInfo.userId }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        {{ userStore.userInfo.username }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            真实姓名
          </div>
        </template>
        {{ userStore.userInfo.realname }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            token
          </div>
        </template>
        {{ userStore.userInfo.loginAccessToken }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            email
          </div>
        </template>
        {{ userStore.userInfo.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            phone
          </div>
        </template>
        {{ userStore.userInfo.phone }}
      </el-descriptions-item>
    </el-descriptions>
</template>

<script setup>
import useUserStore from "@/store/modules/user.js";
// import {computed, ref} from "vue";
//
// const size = ref('')
//
//
// const iconStyle = computed(() => {
//   const marginMap = {
//     large: '8px',
//     default: '6px',
//     small: '4px',
//   }
//   return {
//     marginRight: marginMap[size.value] || marginMap.default,
//   }
// })
const userStore=useUserStore()
</script>

<script>
 export default{
   name:"GuiguCart"
 }
</script>
<style scoped>

</style>